<template>
  <div class="msg">
    {{ msg }}
    <!-- otherToast的内容 -->
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

export default {
  props: ["msg"],
};

export const useToastEffect = () => {
  //定义data响应式数据
  const data = reactive({
    //控制弹窗的显示
    show: false,
    msg: "hello world",
  });
  //showToast的方法
  const showToast = (msg) => {
    data.show = true;
    data.msg = msg;
  };
  const { show, msg } = toRefs(data);

  return { show, msg, showToast };
};
</script>
在实际开发中，开发类似通用组件 解决方案：两种
1.第一种：把组件的数据方法定义在通用组件的外部，通过父子通讯实现（必懂）
defineProps defineEmits 优点：逻辑清晰，结构简单易懂
缺点：通用组件的数据管理和数据处理相对不集中
2.第二种：组件的数据方法定义在通用组件的内部，模块化的方式引入和暴露（选修）
优点：集中的管理数据的数据处理 缺点：需要将需求，抽象到组件方法中

<style lang="scss" scoped>
.msg {
  width: 3rem;
  height: 2rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: skyblue;
}
</style>
